<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >
                新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                >
                修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                >
                删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >
                导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="活动标题" align="center" prop="subject" />
            <el-table-column label="活动主题" align="center" prop="activityType">
                <template slot-scope="scope">
                {{ dictFormat(scope.row.activityType) }}
                </template>
            </el-table-column>
            <el-table-column label="活动地址" align="center" prop="venueAddr" show-overflow-tooltip/>
            <el-table-column label="活动时间" align="center" min-width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.activityTime }}~{{ scope.row.activityTimeEnd || '无' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="活动图片" align="center" prop="subjectImg" width="120">
                <template slot-scope="scope">
                <el-image
                    :src="preFix + scope.row.subjectImg"
                    class="story-image"
                    :preview-src-list="[preFix + scope.row.subjectImg]"
                    fit="cover"
                >
                    <div slot="placeholder" class="image-slot">
                    加载中...
                    </div>
                </el-image>
                </template>
            </el-table-column>
            <el-table-column label="活动状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
                    <el-tag type="info" v-else>关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="260px"
            >
                <template slot-scope="scope">
                    <el-popover
                        placement="top"
                        trigger="click">
                            <div ref="qrcodeContainer" style="width: 140px;height: 140px;">
                                <img :src="qrUrl" alt="" style="width: 140px;height: 140px;"/>
                                <!-- <qrcode-vue :value="qrcodeContent" :size="140"></qrcode-vue> -->
                            </div>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-finished" slot="reference"
                                @click="handleEW(scope.row)"
                            >
                                生成二维码
                            </el-button>
                    </el-popover>
                    
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        style="margin-left: 10px;"
                        @click="handleUpdate(scope.row)"
                    >
                        修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="活动标题" prop="subject">
                            <el-input
                                v-model="form.subject"
                                placeholder="请输入活动标题"
                            />
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="活动地址" prop="venueAddr">
                            <el-input
                                v-model="form.venueAddr"
                                placeholder="请输入活动地址"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="活动状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio label="0">正常</el-radio>
                                <el-radio label="1">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="报名开始时间" prop="reginTime">
                            <el-date-picker
                                v-model="form.reginTime"
                                type="datetime"
                                placeholder="选择报名开始时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            />
                            </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="报名结束时间" prop="reginTimeEnd">
                            <el-date-picker
                                v-model="form.reginTimeEnd"
                                type="datetime"
                                placeholder="选择报名结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            />
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="活动开始时间" prop="activityTime">
                            <el-date-picker
                                v-model="form.activityTime"
                                type="datetime"
                                placeholder="选择活动开始时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            />
                            </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="活动结束时间" prop="activityTimeEnd">
                            <el-date-picker
                                v-model="form.activityTimeEnd"
                                type="datetime"
                                placeholder="选择活动结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            />
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="活动图片" prop="subjectImg">
                            <ImageUpload v-model="form.subjectImg"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="活动内容">
                            <editor v-model="form.subjectContent" :min-height="192"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
         
    </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue';
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
import { listData } from "@/api/system/dict/data"

import { 
    listActivity, 
    getActivity, 
    addActivity, 
    updateActivity, 
    delActivity, 
    getQR
} from "@/api/activity"; 

export default {
    name: "list",
    dicts: ['activity_theme'],
    components: {
        // 'qrcode-vue': QrcodeVue
    },
    data() {
        return {
            // 搜索框配置
            searchData: [
                { type: "input", name: "活动标题:", key: "subject", placeholder: "请输入活动标题" },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {
                status: '0'
            },
            // 表单校验
            rules: {
                subject: [{ required: true, message: "活动标题不能为空", trigger: "blur" }],
                activityType: [
                    { required: true, message: "活动主题不能为空", trigger: "blur" },
                ],
                subjectContent: [
                    { required: true, message: "活动内容不能为空", trigger: "blur" },
                ],
                venueAddr: [
                    { required: true, message: "活动地址不能为空", trigger: "blur" },
                ],
                activityTime: [
                    { required: true, message: "活动开始时间不能为空", trigger: "blur" },
                ],
                activityTimeEnd: [
                    { required: true, message: "活动结束时间不能为空", trigger: "blur" },
                ],
                status: [
                    { required: true, message: "活动状态不能为空", trigger: "blur" },
                ],
            },
            preFix: process.env.VUE_APP_BASE_API,
            // 二维码的显示状态和内容
            // qrcodeContent: '',
            currActivity: '',
            qrUrl: '',
            activeType: '',

        };
    },
    created() {
        this.findActiveType()
    },
    methods: {
        async findActiveType() {
            const res = await listData({dictType: 'activity_theme'})
            let index = res.rows.findIndex(item => item.dictLabel === '集体婚礼')
            this.activeType = res.rows[index].dictValue
            this.queryParams.activityType = this.activeType
            this.getList();

        },
        handleEW(row) {
            this.currActivity = row.subject
            getQR(row.id).then(res=>{
                // this.qrcodeContent = 'https://www.kimi.com/chat/d18bs4n37oqamiddkgl0'
                this.qrUrl = this.preFix + res.msg
            })
            
        },
        downloadQrcode() {
            // 获取二维码容器
            // const qrcodeContainer = this.$refs.qrcodeContainer;
            // html2canvas(qrcodeContainer).then((canvas) => {
            //     canvas.toBlob((blob) => {
            //         const fileName = this.currActivity + '-qrcode';
            //         saveAs(blob, fileName);
            //     });
            // });
        },
        // 字典翻译
        dictFormat(value, column) {
            return this.selectDictLabel(this.dict.type.activity_theme, value)
        },
        // 搜索框事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": // 搜索框
                this.queryParams = querySearch;
                this.handleQuery();
                break;
                case "reset": // 重置按钮
                this.queryParams = {};
                this.queryParams.pageNum = 1;
                this.queryParams.pageSize = 10;
                this.getList();
                break;
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listActivity(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                status: '0'
            };
            this.queryParams.activityType = this.activeType
            this.resetForm("form");
        },
        /** 按钮操作 */
        handleQuery() {
            this.queryParams.activityType = this.activeType
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加活动";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getActivity(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改活动";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.form.activityType = this.activeType
                if (this.form.id != null) {
                    updateActivity(this.form).then((response) => {
                    this.$message.success("修改成功");
                    this.open = false;
                    this.getList();
                    });
                } else {
                    addActivity(this.form).then((response) => {
                    this.$message.success("新增成功");
                    this.open = false;
                    this.getList();
                    });
                }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm(
                '是否确认删除ID为"' + ids + '"的数据项?',
                "警告",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
            )
            .then(function () {
                return delActivity(ids);
            })
            .then(() => {
                this.getList();
                this.$message.success("删除成功");
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/dts/activityManage/export', {
                ...this.queryParams
            }, `activities_${new Date().getTime()}.xlsx`)
        }
       
    },
};
</script>

<style scoped>

</style>